<template>
	<div style="background-color: #FFFFFF; width: 100%; height: 1000px; padding: 15px;">
		<div style="margin-left: 26px; font-size: 13px; font-weight: bold;">
			<span>参数修改记录</span>
		</div>
		<div style="margin-left: 20px;margin-top: 20px; padding:5px">
			<a-row :gutter="16">
				<a-col :span="3">
					<j-dict-select-tag style="width: 100%" placeholder="请选择公司" v-model="queryParam.company"
						dictCode="crm_company,name,id" disabled />
				</a-col>
				<a-col :span="3">
					<j-dict-select-tag style="width: 100%" placeholder="请选择车间" v-model="queryParam.workshop"
						dictCode="workshop" />
				</a-col>
				<a-col :span="3">
					<j-dict-select-tag style="width: 100%" placeholder="请选择工序" v-model="queryParam.productCategory"
						dictCode="product_category" />
				</a-col>

				<a-col :span="5">
					<j-multi-select-tag style="width: 100%" :options="deviceList" placeholder="请选择机台"
						v-model="queryParam.deviceNo" @change="handleChangeCraft" />
				</a-col>
				<a-col :span="5">
					<a-cascader v-model="Parameter" style="width: 100%;" :options="options" placeholder="请选择参数类型"
						@change="onChangeCascader" />
				</a-col>
				<a-col :span="14">
					<div>
						<RangePicker v-model="queryTime" @change="onChange"></RangePicker>
					</div>
				</a-col>

				<a-col :span="2">
					<div>
						<a-button @click="searchQuery()" type="primary" style="margin-top: 10px;">
							查询
						</a-button>
					</div>
				</a-col>
			</a-row>

			<div style="margin-top: 30px;">
				<a-table :columns="columns" :data-source="dataSource"  rowKey="id" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :pagination="ipagination"
               :loading="loading" @change="handleTableChange">
					<a slot="name" slot-scope="text">{{ text }}</a>
				</a-table>
			</div>


		</div>
	</div>

</template>
<script>
	const columns = [
		{
			title: '组织',
			dataIndex: 'company_dictText',
			key: 'company_dictText',
			width: 300,
		},
		{
			title: '车间',
			dataIndex: 'workshopText',
			key: 'workshopText',
			ellipsis: true,
		},
		{
			title: '机台',
			dataIndex: 'deviceName',
			key: 'deviceName',
			ellipsis: true,
		},
		{
			title: '修改前参数',
			dataIndex: 'paramValueBeforeUpdate',
			key: 'paramValueBeforeUpdate',
			ellipsis: true,
		},
		{
			title: '修改后参数',
			dataIndex: 'paramValueAfterUpdate',
			key: 'paramValueAfterUpdate',
			ellipsis: true,
		},
		{
			title: '修改时间',
			dataIndex: 'createTime',
			key: 'createTime',
			ellipsis: true,
		}


	];
	const data = [];
	import RangePicker from '@comp/RangePicker/RangePicker.vue'
	import { JeecgListMixin } from '@/mixins/JeecgListMixin'
	import moment from 'moment/moment'
	import {
		getAction
	} from '@/api/manage'
	import {
		getCrmDeviceParamList
	} from '@api/api'

	export default {
		components: {
			RangePicker
		},
		mixins: [JeecgListMixin],
		data() {
			return {
				queryTime: null,
				data,
				Parameter: undefined,
				columns,
				// 查询条件
				queryParam: {
					company: '1771136798305476610',
					productCategory: undefined,
					workingProcedure: undefined,
					workshop: undefined,
					// 机台号
					deviceNo: undefined,
					// 参数id
					paramId: undefined,
					// 开始时间
					startTime: moment().format('YYYY-MM-DD 00:00:00'),
					// 结束时间
					endTime: moment().format('YYYY-MM-DD 23:59:59')
				},
				options: [],
				deviceList: [],
				workingProcedure: {
					// 细纱1 -> 细纱6
					1: 6,
					// 粗纱2 -> 粗纱5
					2: 5,
					// 抓棉7 -> 清花1
					7: 1,
					// 多仓8 -> 清花1
					8: 1,
					// 精开棉9 -> 清花1
					9: 1,
					// 头并4 -> 并条4
					4: 4,
					//末并5 -> 并条4
					5: 4,
					// 梳棉6  -> 梳棉2
					6: 2,
					// 络筒10  -> 络筒7
					10: 7,
					// 打包11 -> 打包8
					11: 8
				},
				url:{
					list:'/crm_param_update_record/crmParamUpdateRecord/selectParamUpdateRecord'
				}
			};
		},
		watch: {
			'queryParam.workshop'() {
				this.getDeviceList()
			},
			'queryParam.productCategory'() {
				this.getDeviceList()
			}
		},
		methods: {
			getDeviceList() {
				this.queryParam.deviceNo = undefined;
				this.deviceList = []
				// 车间和工序都选才去查询
				if (!this.queryParam.workshop || !this.queryParam.productCategory) {
					return
				}

				const params = {
					workshop: this.queryParam.workshop,
					workingProcedure: this.workingProcedure[this.queryParam.productCategory],
					pageSize: -1
				}
				getAction('/crm_device/crmDevice/list', params).then(res => {
					this.deviceList = res.result.records.map(item => {
						return {
							label: item.workingProcedure_dictText + item.deviceNo,
							value: item.deviceNo
						}
					});
				})
			},
			handleChangeCraft(value) {
				this.queryParam.workingProcedure = this.workingProcedure[this.queryParam.productCategory]
				this.queryParam.deviceNo = value;
				getCrmDeviceParamList(this.queryParam).then((res) => {
					this.options[0].children = res.result.records.map(item => ({
						label: item.paramName,
						value: item.id
					}));
				})
			},
			onChange(date, dateString) {
				this.queryParam.startTime = this.queryTime[0]
				this.queryParam.endTime = this.queryTime[1]
			},
			handleChangeCraft(value) {
				this.queryParam.workingProcedure = this.workingProcedure[this.queryParam.productCategory]
				this.queryParam.deviceNo = value;
				getCrmDeviceParamList(this.queryParam).then((res) => {
					if (res.result.records.length > 0) {
						this.options = [{
							value: '运行参数',
							label: '运行参数',
							children: [],
						}]
						this.options[0].children = res.result.records.map(item => ({
							label: item.paramName,
							value: item.id
						}));
					} else {
						this.options = [{
							value: '运行参数',
							label: '运行参数',
							children: [{
						 	label: '暂无数据',
						 	value: ''
							}]
						}]
					}

				})
			},
			onChangeCascader(value) {
				this.queryParam.paramId = value[1];
			},
		},
	};
</script>
